<template>
  <div class="explore">
    <blank-box title="探索">
      <template #content>
        <el-row :gutter="20">
          <el-col :span="6" v-for="catelog in catelogList" :key="catelog.id">
            <catelog-item :catelog="catelog"></catelog-item>
          </el-col>
        </el-row>
        <el-pagination
            layout="prev, pager, next"
            @current-change="getCatelogList"
            :page-size="catelogVo.pageSize"
            :current-page.sync="catelogVo.currentPage"
            :total="catelogVo.total">
        </el-pagination>
      </template>
    </blank-box>
  </div>
</template>

<script>
import {catelogList} from "../../api/catelog";
import BlankBox from "../../components/BlankBox";
import CatelogItem from "../catelog/component/CatelogItem";

export default {
  name: "square",
  components: {CatelogItem, BlankBox},
  created() {
    this.getCatelogList()
  },
  data() {
    return {
      catelogVo: {
        currentPage: 1,
        pageSize: 12,
        total: 0
      },
      catelogList: []
    }
  },
  methods: {
    getCatelogList() {
      catelogList(this.catelogVo).then(res => {
        let data = res.data
        this.catelogList = data.data.list
        this.updatePageVo(this.catelogVo, data.data)
      }).catch(err => console.log(err))
    },
    updatePageVo(oldPage, newPage) {
      oldPage.currentPage = newPage.pageNum
      oldPage.pageSize = newPage.pageSize
      oldPage.total = newPage.total
    },
  }
}
</script>

<style scoped>
.explore {
  min-height: 50vh;
}
</style>
